<template>
  <div ref="baseInfo" class="base_info">
    <div v-if="!baseInfo[title]" class="commonComponent_container_skeleton">
      <a-skeleton
        :width="60"
        active
        :paragraph="{
          rows: 2,
          width: '100%'
        }"
        :title="{
          width: '40%'
        }"
      />
    </div>
    <div class="base_info_left">
      <div class="base_info_left_title">
        <div class="base_info_left_title_project">
          {{ baseInfo[title] }}
        </div>
        <div v-if="enterpriseName" class="enterpriseName">所在条线 : <span class="enterpriseNameInfo">{{ enterpriseName }}</span></div>
      </div>
      <div style="height: 80%;">
        <div :class="`base_info_left_money${flagHide}`">
          <div
            v-for="(item, index) in money"
            :key="index"
            class="base_info_left_money_box"
          >
            <div v-if="item.num" class="base_info_left_money_box_num">{{ AmountSlite(item.num) }}</div>
            <div v-else class="base_info_left_money_box_num">0</div>
            <div class="base_info_left_money_box_name">{{ item.name }}</div>
          </div>
        </div>
        <div v-if="flagHide==='2'" class="base_info_left_btn">
          <div
            v-for="item in btn_list"
            :key="item.id"
            :class="btnFlag === item.id ? 'newbtn' : 'btn'"
            @click="btnChange(item.index, item.id)"
          >
            <span>{{ item.name }}</span>
            <p>{{ item.text }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="base_info_auto" /> -->
    <div class="base_info_right">
      <vue-qr v-if="flagHide==='2'" :text="qrUrlOne" :size="254" />
      <div v-if="flagHide==='1'" class="base_info_circle">
        <div
          v-for="(item, index) in progress"
          :key="index"
        >
          <el-progress
            type="circle"
            color="#1492FF"
            :stroke-width="15"
            :width="baseInfoHeight/2"
            :percentage="item.num || 0"
          />
          <p>{{ item.title }}</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { AmountSlite } from '@/utils/utils';
import { getGlobal } from '@/utils/global';
import vueQr from 'vue-qr';
export default {
  components: {
    vueQr
  },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: () => ''
    },
    rate: {
      type: String,
      default: () => ''
    },
    noteList: {
      type: Array,
      default: () => ([])
    },
    enterpriseName: {
      type: String,
      default: () => ''
    },
    flagHide: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      baseInfoHeight: 250,
      // qrUrlOne: `http://115.239.175.246:5501/h5/#/formView?filter=PROGRAMCODE,8250010310001003&data=tableId,585&token=1`,
      btnFlag: 0,
      btn_list: [
        {
          id: 2,
          name: '公开公示',
          text: '事前',
          index: 2
        },
        {
          id: 3,
          name: '抽查巡查',
          text: '事中',
          index: 3
        },
        {
          id: 4,
          name: '合同发票',
          text: '事后',
          index: 4
        }
      ],
      qrUrlOne: ''
    };
  },
  computed: {
    money() {
      const arr = [];
      this.noteList.forEach(item => {
        arr.push({
          name: item.key,
          num: this.baseInfo[item.value]
        });
      });
      return arr;
    },
    progress() {
      const rate = this.baseInfo[this.rate] && this.baseInfo[this.rate].split('%')[0];
      const arr = [
        { title: '资金使用率', num: Number(rate) }
      ];
      return arr;
    }
  },
  created() {
    this.$nextTick(() => {
      this.baseInfoHeight = this.$refs.baseInfo.offsetHeight;
    });
    this.getQrUrl();
  },
  methods: {
    AmountSlite,
    btnChange(val, id) {
      this.btnFlag = id;
      this.$emit('btnChange', val);
    },
    getQrUrl() {
      getGlobal().then((all) => {
        this.qrUrlOne = all.res.data.qrUrl + '?filter=PROGRAMCODE,8250010310001003&data=tableId,585&token=1&menuId=1624435828446';
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
/*像素转换相对单位vw*/
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.base_info {
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  .commonComponent_container_skeleton{
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 33;
    padding: 20px;
    /deep/ .ant-skeleton-content .ant-skeleton-paragraph > li,
    /deep/ .ant-skeleton-content .ant-skeleton-title
    {
      height: 35px;
      border-radius: 8px;
    }
  }
  .base_info_left {
    min-width: px2vw(1100px);
    padding-left: px2vw(34px);
    .base_info_left_title {

      height: 20%;
      padding: px2vw(20px) 0 0 0;
      background-color: #fff;
      font-weight: 500;
      font-family: PingFangSC, PingFangSC-Medium;
      .base_info_left_title_project {
        font-size: px2vw(32px);
        color: #333333;
      }
      .base_info_left_title_company {
        font-size: px2vw(18px);
        color: rgba(0, 0, 0, 0.45);
      }
      .enterpriseName{
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        color: rgba(0,0,0,0.45);
        .enterpriseNameInfo{
          padding-left: 5px;
        }
      }
    }
    .base_info_left_money2 {
      display: flex;
      height: 44%;
      align-items: flex-end;
      .base_info_left_money_box {
        padding-right: px2vw(50px);
        // flex: 1;
        .base_info_left_money_box_num {
          font-family: DINCondensed, DINCondensed-Bold;
          font-weight: 700;
          font-size: px2vw(30px);
          color: #faad14;
        }
        .base_info_left_money_box_name{
          color: rgba(0,0,0,0.85);
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
        }
      }
    }
    .base_info_left_money1 {
      display: flex;
      height: 100%;
      align-items: center;
      .base_info_left_money_box {
        padding-right: px2vw(50px);
        // flex: 1;
        .base_info_left_money_box_num {
          font-family: DINCondensed, DINCondensed-Bold;
          font-weight: 700;
          font-size: px2vw(48px);
          color: #faad14;
        }
        .base_info_left_money_box_name{
          color: rgba(0,0,0,0.85);
          font-size: px2vw(22px);
          font-family: PingFangSC, PingFangSC-Medium;
        }
      }
    }
    .base_info_left_btn{
      height: 56%;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        .btn {
        margin-top: px2vw(6px);
        width: px2vw(250px);
        height:72%;
        border: 1px solid #1492ff;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        span {
          font-size: px2vw(28px);
          color: #1492ff;
          padding-left: 25%;
        }
        p {
          position: absolute;
          left: 5%;
          top: 5%;
          color: #99cbf9;
          font-size: px2vw(20px);
        }
      }
      .newbtn {
        margin-top: px2vw(6px);
        width: px2vw(240px);
        height: 72%;
        border: 1px solid #1492ff;
        border-radius: 5px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        background: url("~@/assets/img/homwAnalyse/支出预算编制备份 12.png") 12%
          12% no-repeat;
        background-size: 120% 120%;
        span {
          font-size: px2vw(28px);
          color: #ffffff;
          padding-right: px2vw(36px);
        }
        p {
          position: absolute;
          left: 5%;
          top: 5%;
          color: rgba(255, 255, 255, 0.8);
          font-size: px2vw(20px);
        }
      }
    }
  }
  .base_info_auto {
    // background-color: bisque;
    flex: 1;
  }
  .base_info_right {
    min-width: px2vw(474px);
    display: flex;
    justify-content: flex-end;
    .base_info_circle {
      width: px2vw(200px);
      height: 100%;
      padding: 0 px2vw(20px);
      margin-right: px2vw(45px);
      margin-top: px2vw(10px);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      p {
        font-size: px2vw(24px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        margin-top: px2vw(20px);
      }
    }
  }
}
/deep/.el-progress__text {
  font-size: px2vw(32px) !important;
  font-weight: 700%;
  color: rgba(0, 0, 0, 0.65);
}
</style>
